<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    >
    <title>用户体系</title>
    <!-- head 中 -->
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/axios.min.js"></script>
    <style type="text/css">
        body {
            margin: 10px;
        }

        .userTable {
            width: 100%;
            height: 80%;
            /*display: flex;*/
            /*align-items: center;*/
            /*justify-content: center;*/
        }
    </style>
</head>
<body>
<div id="app">
    <div class="userTable">
        <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="type" label="111"></el-table-column>
            <el-table-column label="年限" align="center">
                <template slot-scope="scope">
                    <div v-for="items in scope.row.fd">{{items.value}}</div>
                </template>
            </el-table-column>
            <el-table-column label="忠诚用户" align="center">
                <template slot-scope="scope">
                    <div v-for="items in scope.row.data.zc">{{items.value}}</div>
                </template>
            </el-table-column>
            <el-table-column label="活跃用户" align="center">
                <template slot-scope="scope">
                    <div v-for="items in scope.row.data.hy">{{items.value}}</div>
                </template>
            </el-table-column>
            <el-table-column label="沉默用户" align="center">
                <template slot-scope="scope">
                    <div v-for="items in scope.row.data.cm">{{items.value}}</div>
                </template>
            </el-table-column>
            <el-table-column label="普通用户" align="center">
                <template slot-scope="scope">
                    <div v-for="items in scope.row.data.pt">{{items.value}}</div>
                </template>
            </el-table-column>
        </el-table><br/>
        <el-table
                :data="tableData2"
                style="width: 100%">
            <el-table-column prop="type" label="123"></el-table-column>
            <el-table-column label="年限" align="center">
                <template slot-scope="scope">
                    <div v-for="items in scope.row.fd">{{items.value}}</div>
                </template>
            </el-table-column>
            <el-table-column label="线上活动" align="center">
                    <el-table-column
                            prop="province"
                            label="1-200分"
                            align="center"
                    >
                        <template slot-scope="scope">
                           <div v-for="item in scope.row.data.zc">{{item.value}}</div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="city"
                            label="201-400分"
                            align="center"
                            width="120">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.data.hy">{{item.value}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="401-1000分"
                            align="center"
                            width="300">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.data.cm">{{item.value}}</div>
                        </template>
                    </el-table-column>
            </el-table-column>
            <el-table-column label="线下入库" align="center">
                <el-table-column
                        prop="province"
                        label="1-200分"
                        align="center"
                >
                    <template slot-scope="scope">
                        <div v-for="(item,index) in scope.row.data2.zc">{{item.value}}</div>
                        <!--<div>{{scope.row.data.hy}}</div>-->
                    </template>
                </el-table-column>

                <el-table-column
                        prop="city"
                        label="201-400分"
                        align="center"
                       >
                    <template slot-scope="scope">
                        <div v-for="item in scope.row.data2.hy">{{item.value}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="401-1000分"
                        align="center"
                       >
                    <template slot-scope="scope">
                        <div v-for="item in scope.row.data2.cm">{{item.value}}</div>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>

</div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                options: [],
                headers: [{key: 'zc', value: '忠诚'}, {key: 'hy', value: '活跃'}, {key: 'cm', value: '沉默'}, {
                    key: 'pt',
                    value: '普通'
                }],
                tableData: [
                    {
                        fd: [
                            {value: "男"},
                            { value: "女"},
                        ],
                        type: '性别',
                        zc: [{value: '19'}, {value: '18'}],
                        hy: [{value: '919'}, {value: '19'}],
                        cm: [{value: '39'}, {value: '13'}],
                        pt: [{value: '5'}, {value: '19'}],

                    },
                    {
                        fd: [
                            { value: "20岁以下"},
                            {value: "20-30岁"},
                            { value: "30-40岁"}
                        ],
                        type: '年龄',
                        zc: [{value: '99'}, {value: '19'}, {value: 100}],
                        hy: [{value: '99'}, {value: '19'}, {value: 100}],
                        cm: [{value: '99'}, {value: '19'}, {value: 100}],
                        pt: [{value: '99'}, {value: '19'}, {value: 100}],

                    }, {
                        fd: [
                            { value: "1年"},
                            { value: "2年"},
                            { value: "3年"}
                        ],
                        type: '注册年限',
                        zc: [{value: '9'}, {value: '1'}, {value: 100}],
                        hy: [{value: '9'}, {value: '1'}, {value: 100}],
                        cm: [{value: '9'}, {value: '1'}, {value: 100}],
                        pt: [{value: '9'}, {value: '1'}, {value: 100}],
                    }],
                tableData2: [
                    {
                        fd: [
                            {value: "男"},
                            { value: "女"},
                        ],
                        type: '性别',
                        data:{
                            zc: [{value: '19'}, {value: '118'}],
                            hy: [{value: '919'}, {value: '19'}],
                            cm: [{value: '39'}, {value: '13'}],
                            pt: [{value: '5'}, {value: '19'}],
                        },
                        data2:{
                            zc: [{value: '19'}, {value: '1181'}],
                            hy: [{value: '919'}, {value: '19'}],
                            cm: [{value: '39'}, {value: '13'}],
                            pt: [{value: '5'}, {value: '19'}],
                        }
                    },
                    {
                        fd: [
                            { value: "20岁以下"},
                            {value: "20-30岁"},
                            { value: "30-40岁"}
                        ],
                        type: '年龄',
                       data:{
                           zc: [{value: '99'}, {value: '19'}, {value: 101}],
                           hy: [{value: '99'}, {value: '19'}, {value: 100}],
                           cm: [{value: '99'}, {value: '19'}, {value: 100}],
                           pt: [{value: '99'}, {value: '19'}, {value: 100}],
                       },
                        data2:{
                            zc: [{value: '99'}, {value: '19'}, {value: 1031}],
                            hy: [{value: '99'}, {value: '19'}, {value: 100}],
                            cm: [{value: '99'}, {value: '19'}, {value: 100}],
                            pt: [{value: '99'}, {value: '19'}, {value: 100}],
                        }

                    },
                ],
            }
        },
        methods: {
            openResult() {
                axios.get('records').then(res => {
                    if (res.data.length > 0) {
                        window.location.href = 'result?initScore=' + res.data[res.data.length - 1];
                    } else {
                        this.$message.success("图表生成中.....,请稍后再试")
                    }
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }
        }
    })
</script>
</html>
